<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row>
                <el-col :span="6">
                    <el-input placeholder="请输角色名称" clearable v-model="name" @clear="searchRole">
                        <el-button slot="append" icon="el-icon-search" @click="addRole"></el-button>
                    </el-input>
                </el-col>

                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible">添加角色</el-button>
                </el-col>
            </el-row>

            <el-table :data="roleList" style="width: 100%">

                <el-table-column label="角色ID" prop="id"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="showEditDialog( scope.row)">修改</el-button>
                        <el-button type="danger" @click="removeRoleById( scope.row)">删除</el-button>
                        <el-button type="warning" @click="openGrantDialog(scope.row)">授权</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40 , 45, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

        </el-card>

        <!-- ======================= 授权对话框 ============================= -->
        <el-dialog title="角色授权" :visible.sync="grantDialogVisible" :before-close="handleClose">

            <el-tree
                :data="permissionList"
                default-expand-all
                show-checkbox
                node-key="id"
                ref="tree"
                :check-strictly="myStrict"
                :default-checked-keys="defaultChecked"
                :props="defaultProps">
            </el-tree>

            <span slot="footer" class="dialog-footer">
                <el-button @click="grantPermissionClose">取 消</el-button>
                <el-button type="primary" @click="doGrantPermission">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import {Message} from "element-ui";

export default {
    name: "RoleView",
    data() {
        return {
            // 搜索相关的名称 ----------------
            name: "",
            // 分页显示相关-------------------
            roleList: [],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            // 授权相关-------------------
            grantDialogVisible: false,
            defaultChecked: [],
            permissionList: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            myStrict: false,
            roleId: "",

        }
    },
    methods: {
        searchRole() {

        },
        addRole() {

        },
        addDialogVisible() {

        },
        showEditDialog(row) {
            console.log("显示修改对话框", row.id);
        },
        removeRoleById(row) {
            console.log("删除角色功能", row.id);
        },
        openGrantDialog(row) {
            console.log("打开授权对话框", row.id);
            // 打开对话框。
            this.grantDialogVisible = true;
            // 是否使用严格模式(严格模式：回显数据时,勾选父级,不会全部选中子级)
            this.myStrict = true;
            // 根据当前的角色id得到相应的权限
            this.roleId = row.id;
            let url = "/api/menu/getAllPermissionByRoleId/" + this.roleId;
            this.$axios.get(url).then(response => {
                if (response.data.status == 200) {
                    console.log("根据id查到的权限信息：", response.data.data);
                    this.defaultChecked = response.data.data;
                    // 数据加载完毕，不要严格模式了
                    this.myStrict = false;
                } else {
                    this.$message({
                        type: "error",
                        message: "菜单加载错误",
                        duration: 1000
                    })
                }
            })
        },
        // 关闭授权对话框
        grantPermissionClose() {
            this.grantDialogVisible = false;
        },
        doGrantPermission() {
            console.log("当前角色id:", this.roleId);

            // 全选中的
            let checkedId = this.$refs.tree.getCheckedKeys();
            // 半选中的
            let halfCheckedId = this.$refs.tree.getHalfCheckedKeys();
            // 全选和半选的id都是我们需要的
            let permissionId = checkedId.concat(halfCheckedId);

            console.log("当前权限id:", checkedId);


            let url = "/api/permission/grant";
            let params = new URLSearchParams();
            params.append("roleId", this.roleId);
            params.append("ids", permissionId )

            this.$axios.post(url, params).then(response => {
                if(response.data.status == 200){
                    this.$message({
                        type: "success",
                        message: response.data.message,
                        duration: 1000
                    })
                }else {
                    Message({
                        type: "error",
                        message: response.data.message,
                        duration: 1000
                    })
                }
            })
            //  完成之后，关闭对话框
            this.grantPermissionClose();
        },
        handleClose() {
            // 关闭授权窗口
            this.grantDialogVisible = false;
            // 这样写，无法取消勾选
            // this.defaultChecked = [];

            this.$refs.tree.setCheckedKeys([]);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getAllRole();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.getAllRole();
        },
        // 得到所有的角色
        getAllRole() {
            let url = "/api/role/showAll";
            this.$axios.get(url, {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
            }).then(response => {

                if (response.data.status == 200) {
                    // 把查到的数据，给到menuList
                    this.roleList = response.data.data.list;
                    this.pageNum = response.data.data.pageNum;
                    this.pageSize = response.data.data.pageSize;
                    this.total = response.data.data.total;
                } else {
                    this.$message({
                        type: "error",
                        message: "菜单加载错误",
                        duration: 1000
                    })
                }
            })
        },
        getAllPermission() {
            let url = "/api/menu/getAllPermission";
            this.$axios.get(url).then(response => {

                if (response.data.status == 200) {
                    // 把查到的数据，给到menuList
                    this.permissionList = response.data.data;
                } else {
                    this.$message({
                        type: "error",
                        message: "权限加载错误",
                        duration: 1000
                    })
                }
            })
        }
    },
    created() {
        this.getAllRole()
        this.getAllPermission();
    }
}
</script>

<style scoped>

</style>
